<template>
    <div class="content flex-col">
        <div class="tenant-header">
            <div class="home-title flex-row">
                {{account.version}}
                <div class="tenant_version">
                    {{account.isTrial ?'试用-' : ''}}
                    {{version}}
                    <div class="remain_time">
                        <template v-if="!account.timeout">
                        <span style="margin-left: 50px">剩余</span>
                        <span class="information-day">{{account.remainingDays}}</span>
                        天
                        </template>
                        <template v-if="account.timeout">
                            <span class="information-day" style="color: red; margin-left: 50px">已过期</span>
                        </template>
                        <span style="margin-left: 20px">{{account.endDate[0]}}年{{account.endDate[1]}}月{{account.endDate[2]}}日到期</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="content" v-if="tenantId ==='000000' || (releaseType==='PRIVATE' && account.version === '企业版')">
            <div class="tenant_item">
                <span>LOGO：</span>
                <div style="width: 400px; display: flex">
                    <img style="width: 35px; height: 35px; margin-right: 10px" :src="sysInfo.logo"/>
                    <el-upload
                        class="upload-demo"
                        action="/api/Cgs/Portal/Visual/PutFile"
                        :show-file-list="showList"
                        :beforeUpload="handleBeforeUpload"
                        :on-success="handleSuccess"
                    >
                        <el-button size="small" type="primary">
                            <a-icon type="cloud-upload" />
                            上传logo
                        </el-button>
                    </el-upload>
                    <el-button @click="handleCancelLogo" style="height: 30px; margin-left: 10px" size="small" type="primary">取消</el-button>
                </div>
            </div>
            <div class="tenant_item">
                <span>登录背景：</span>
                <div style="width: 400px; display: flex">
                    <img style="width: 35px; height: 35px; margin-right: 10px" :src="sysInfo.bgImg"/>
                    <el-upload
                        class="upload-demo"
                        action="/api/Cgs/Portal/Visual/PutFile"
                        :show-file-list="showList"
                        :beforeUpload="handleBeforeUpload"
                        :on-success="handleBgImgSuccess"
                    >
                        <el-button size="small" type="primary">
                            <a-icon type="cloud-upload" />
                            上传
                        </el-button>
                    </el-upload>
                    <el-button @click="handleCancelBgImg" style="height: 30px; margin-left: 10px" size="small" type="primary">取消</el-button>
                </div>
            </div>
            <div class="tenant_item">
                <span>主题：</span>
                <a-select v-model="sysInfo.theme" @change="handleThemeChange" placeholder="请选择主题" style="width: 400px">
                    <a-select-option value="cgs_light">
                        简约白
                    </a-select-option>
                    <a-select-option value="cgs_dark">
                        科技黑
                    </a-select-option>
                </a-select>
            </div>
            <div class="tenant_item">
                <span>名称：</span>
                <el-input v-model="sysInfo.name" placeholder="请输入名称" style="width: 400px"></el-input>
            </div>
            <div class="tenant_item">
                <span>域名备案信息：</span>
                <el-input v-model="sysInfo.domainRegistrationInfo" placeholder="请输入备案信息" style="width: 400px"></el-input>
            </div>
            <el-button style="width: 200px" size="small" type="primary" @click="handleOk">保存</el-button>
        </div>
    </div>
</template>

<script>

    import {getTenantInfo} from "@/util/auth";
    import {updateSysInfo} from '@/api/system'

    export default {
        name: "home",
        data(){
            return {
                account: {
                    beginDate: ['', '', ''],
                    endDate: ['', '', ''],
                    isTrial: true,
                    remainingDays: 0,
                    version: '',
                    timeout: false
                },
                sysInfo: {
                    logo: '',
                    domainRegistrationInfo: "",
                    theme: "cgs_light",
                    name: "",
                    bgImg: '',
                },
                tenantId: '',
                showList: false,
            }
        },
        methods: {
            handleThemeChange(theme) {
                this.$store.commit('updateSysTheme', theme)
            },
            stringToDate(str) {
                let tempStrs = str.split(" ");
                return tempStrs[0].split("-");
            },
            handleBeforeUpload() {
              if (this.releaseType === "PUBLIC") {
                return true
              } else if (this.releaseType === "PRIVATE") {
                if(this.account.version === "企业版" ) {
                  return true
                } else {
                  this.$message.warning("社区版不支持上传，敬请理解！")
                  return false
                }
              }

            },
            handleCancelLogo() {
                this.sysInfo.logo = ''
            },
            handleCancelBgImg() {
                this.sysInfo.bgImg = ''
            },
            handleBgImgSuccess(res) {
              if(res.success){
                this.sysInfo.bgImg = res.data.link
              }
            },
            handleSuccess(response) {
                if(response.success){
                    this.sysInfo.logo = response.data.link
                }
            },
            handleOk() {
              if (this.releaseType === "PRIVATE") {
                if(this.account.version !== "企业版" ) {
                  this.$message.warning("社区版不支持修改名称，敬请理解！")
                  return
                }
              }
                updateSysInfo(this.sysInfo).then(res => {
                    res = res.data
                    if (res.success) {
                        this.$store.commit('updateSysInfo', this.sysInfo)
                        this.$message.success("保存成功！")
                    }
                })
            }
        },
        created() {
            let tenantInfo = getTenantInfo()
            this.account = tenantInfo.account;
            this.tenantId = tenantInfo.tenantId;
            if(this.account.version === ""){
                this.account.version = "企业版"
            }
            this.account.beginDate = this.stringToDate(this.account.beginDate);
            this.account.endDate = this.stringToDate(this.account.endDate)
            this.sysInfo = {...this.$store.state.sysInfo}
        },
        computed: {
            version () {
                const version = this.$store.getters.version
                return version === '' ? '' : `v ${version}`
            },
            releaseType () {
                return this.$store.getters.releaseType
            },
        }
    }
</script>
<style scoped>
    .home-title {
        height: 100%;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
    }
    .tenant_version {
        font-size: 14px;
        font-weight: 500;
        margin-left: 15px;
    }
    .information-day {
        font-family: MicrosoftYaHei;
        color: #4C84FF;
        font-size: 25px;
    }
</style>
